<template>
    <div class="level">
        <h1>医院</h1>
        <div class="content">
                <div class="left">等级:</div>
                <ul class="hospital">
                    <li :class="{active:activeFlag==''}" @click="changeLevel('')">全部</li>
                    <li v-for="Level in LevelArr" :class="{active:activeFlag==Level.value}" :key="Level.value" @click="changeLevel(Level.value)">{{Level.name}}</li>                   
                </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
        import { reqHospitalLevelAndRegion } from "@/api/home";
        import { onMounted,ref} from "vue";

        //返回数据的接收类型
        import type { HospitalLevelAndRegionResponseData,HospitalLevelAndRegionArr } from "@/api/home/type";

        //定义一个医院等级的数据存储变量
        let LevelArr = ref<HospitalLevelAndRegionArr>([])
        //控制 医院等级高亮的 节点
        let activeFlag = ref<string>('')


        onMounted(()=>{
            getLevel();
        })

        const getLevel = async() =>{
            let result :any=  await reqHospitalLevelAndRegion('HosType');
             // console.log('aaaaaaaaaaa',result)
              let result3:HospitalLevelAndRegionResponseData  = result.data;
               console.log('cccccccccccccccc',result3)
             if(result3.code==200){
                LevelArr.value = result3.data;
             }
             
        }

            //点击按钮 触发事件
        const changeLevel = (level:string)=>{
            activeFlag.value = level
            $emit('getLevel',level)
        }



        let $emit = defineEmits(['getLevel'])
</script>


<!-- 为了开发者工具能看到名字   vue3 写法里没有name属性的标注 所以 vue-tool中找不到名字 全是INDEX 组件  很难找  -->
<!-- 加个名字 就好找了  直接 到Level组件 -->
<script lang="ts">
    export default {
        name:'Level'
    }
</script>


<style scoped lang="scss">
    .level {
        color:#7f7f7f;
        h1{
            font-weight: 900;
            margin: 10px 0px;
        }
        .content{
            display: flex;
            .left{
                margin-right: 10px;
            }
            .hospital{
                display: flex;
                li{
                    margin-right: 10px;
                    &.active{
                        color: #55a6fe;
                    }
                }

                li:hover{
                    color: #55a6fe;
                }
               
            }
        }
    }
</style>